<div class="page-title">
  <div class="row">
    <div class="col-xs-9">
      <h1>Servers<span *ngIf="shownServerId"> / {{ shownServerId }}</span></h1>
    </div>
    <div class="col-xs-3 main-button">
      <button class="btn btn-primary" (click)="fetchData()">Refresh</button>
    </div>
  </div>
</div>

<filter
  *ngIf="!shownServerId"
  (onChange)="fetchData()"
>
  <search criterion [target]="'name'"></search>
  <choice criterion
    [title]="'State'"
    [target]="'state'"
    [values]="['error', 'operational', 'down']"
  ></choice>
</filter>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>

<div class="row" *ngIf="servers && servers.length">
  <div class="col-xs-12">

    <div class="table-help">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-4">ID</div>
      <div class="col-xs-2">IP</div>
      <div class="col-xs-3">Status</div>
    </div>

    <div
      class="box"
      [ngClass]="{open: server.id === shownServerId}"
      *ngFor="let server of servers|id:shownServerId">
      <div class="col-xs-3 name">{{server.data.name}}</div>
      <div class="col-xs-4 parameter">
        {{server.id}}
      </div>
      <div class="col-xs-2 parameter">{{server.data.ip}}</div>
      <div class="col-xs-2 state" [ngClass]="server.data.state">
        {{server.data.state}}
      </div>
      <div class="col-xs-1 action">
        <a [routerLink]="['/servers']" [fragment]="shownServerId === server.id ? '' : server.id">
          <span
            class="glyphicon"
            [ngClass]="'glyphicon-triangle-' + (server.id === shownServerId ? 'bottom' : 'right')"
          ></span>
        </a>
      </div>

      <div class="bowels">
        <div class="col-xs-12">
          <h3>Server Facts</h3>
        </div>

        <div
          class="col-xs-6 server-details"
          *ngFor="let details of getKeyHalfsets(server)">
          <div
            class="server-details-item row scrollable"
            *ngFor="let detail of details">
            <div class="col-xs-4 name" [title]="detail">{{detail|deprefix:'ansible'}}</div>
            <div class="col-xs-8 json parameter"><longdata [key]="server.id + '_' + detail" [data]="server.data.facts[detail]">{{server.data.facts[detail]|json}}</longdata></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<loader *ngIf="!servers"></loader>

<div *ngIf="servers && !servers.length" class="no-servers">
  You don't have any servers.
</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>

